<template>
  <div id="collect_query">
    <v-header title="采集明细" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="collectCon">
      <div class="collect_main">
        <div class="collect_header">
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>类型:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="exp_types" @change="checkTypes">
                  <el-checkbox v-for="type in typeList" :label="type.val" :key="type.val">{{type.name}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>版本:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="app_vers" @change="checkTypes">
                  <el-checkbox v-for="version in versionList" :label="version.ver_num" :key="version.ver_num">{{version.ver_num}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>状态:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="exp_statuss" @change="checkTypes">
                  <el-checkbox v-for="status in bugStatusList" :label="status.val" :key="status.val">{{status.name}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition">
            <el-row>
              <el-col :span="1">
                <span>等级:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="exp_levels" @change="checkTypes">
                  <el-checkbox v-for="status in level_lists" :label="status.val" :key="status.val">{{status.label}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>
          <div class="condition input-box">
                <span style="margin-top: 6px;">用户:</span>
                <el-input v-model="appUserId" placeholder="请输入用户" style="width:210px;margin-left:15px" @change="appUseridChange"></el-input>
          </div>
          <div class="condition input-box">
                <span style="margin-top: 6px;">设备:</span>
                <el-input v-model="deviceId" placeholder="请输入设备" style="width:210px;margin-left:15px" @change="deviceidChange"></el-input>
          </div>
          <div class="condition input-box">
            <el-row>
              <el-col :span="1">
                <span style="margin-top: 6px;">日期:</span>
              </el-col>
              <el-col :span="22">
                <el-date-picker
                  size="small"
                  v-model="dates"
                  type="daterange"
                  :picker-options="pickerOptions1"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="collect_table">
          <el-table :data="tableData">
            <el-table-column header-align="center" align="center" prop="exp_title" label="标题"></el-table-column>

            <el-table-column header-align="center" align="center" prop="exp_user_id" label="用户"></el-table-column>
            <el-table-column header-align="center" align="center" prop="dev_id" label="设备"></el-table-column>

            <el-table-column header-align="center" align="center" label="类型">
              <template slot-scope="scope">{{ handleTypeText(scope.row.exp_type) }}</template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="状态">
              <template slot-scope="scope">{{ handleStatusText(scope.row.exp_status) }}</template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="等级">
              <template slot-scope="scope">{{ handleClassText(scope.row.exp_level) }}</template>
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="exp_hap_time" label="日期"></el-table-column>
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="collectDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="collect_pages">
          <el-pagination
              small
              @current-change="handleCurrentChange"
              @prev-click="prevClick"
              @next-click="nextClick"
              :page-size="pageSize"
              :pager-count="5"
              layout="total, prev, pager, next"
              :total="Number(total)">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { VHeader } from '../../components'
  import { nextPage, getDateTime } from '../../assets/js/index'
  import api from '../../api/url'
  import { mapMutations } from 'vuex'
  import ajax from '../../api/ajax/ajax'
  import { mixinParams } from '../../assets/js/mixin1'
  export default {
    components: {
      VHeader
    },
    mixins: [mixinParams],
    data () {
      return {
        exp_types: [],
        exp_statuss: [],
        app_vers: [],
        exp_levels: [],
        level_lists: [{val: '0', label: '未分级'}, {val: '1', label: '紧急'}, {val: '2', label: '高'}, {val: '3', label: '普通'}, {val: '4', label: '低'}],
        typeList: [{name: '卡顿', val: '2'}, {name: '崩溃', val: '1'}, {name: '异常', val: '0'}],
        versionList: ['1.0', '2.0', '3.0'],
        bugStatusList: [{name: '已解决', val: '1'}, {name: '未解决', val: '0'}],
        tableData: [],
        pageSize: 10, // 每页条目数
        total: 0, // 总条目数
        pageNo: 1, // 当前页
        dates: [],
        from_date: '',
        to_date: '',
        appUserId: '',
        deviceId: '',
        pickerOptions1: { // 推送禁止定时时间
          disabledDate (time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        }
      }
    },
    watch: {
      appFlag: {
        handler (val) {
          if (val) {
            this.addFlag = true
            nextPage('/home/bugIndex')
            this.pd_updatePath('/home/bugIndex')
          }
        }
      },
      dates (arr) {
        if (arr !== null) {
          this.from_date = getDateTime(arr[0], 'day') + ' 00:00:00'
          this.to_date = getDateTime(arr[1], 'day') + ' 23:59:59'
          this.queryAllBugList()
        } else {
          this.from_date = ''
          this.to_date = ''
          this.queryAllBugList()
        }
      }
    },
    methods: {
      ...mapMutations([
        'updateBugListOpt'
      ]),
      checkTypes () {
        let params = {
          exp_levels: this.exp_levels,
          app_vers: this.app_vers,
          exp_statuss: this.exp_statuss,
          exp_types: this.exp_types,
          pageNo: this.pageNo,
          from_date: this.from_date,
          to_tate: this.to_date,
          exp_user_id: this.appUserId,
          dev_id: this.deviceId
        }
        ajax.post(api.SELECT_ALL_BUG_LIST, params)
          .then(res => {
            if (!res.data || !res.data.list) {
              return
            }
            this.total = res.data.total
            this.tableData = res.data.list
          })
      },
      queryAllBugList () {
        let params = {
          exp_levels: this.exp_levels,
          app_vers: this.app_vers,
          exp_statuss: this.exp_statuss,
          exp_types: this.exp_types,
          pageNo: this.pageNo,
          from_date: this.from_date,
          to_tate: this.to_date,
          exp_user_id: this.appUserId,
          dev_id: this.deviceId
        }
        ajax.post(api.SELECT_ALL_BUG_LIST, params)
          .then(res => {
            if (!res.data || !res.data.list) {
              return
            }
            this.tableData = res.data.list
            this.total = res.data.total
          })
      },
      queryVersionList () {
        ajax.post(api.SELECT_APP_VERSION_LIST)
          .then(res => {
            this.versionList = res.data.list
          })
      },
      // 用户输入调用
      appUseridChange () {
        this.queryAllBugList()
      },
      // 设备输入调用
      deviceidChange () {
        this.queryAllBugList()
      },
      collectDetail (val) {
        let buglistopt = {
          exp_title: val.exp_title,
          exp_desc: val.exp_desc,
          id: val.device_id,
          exp_id: val.exp_id,
          app_ver: val.app_ver
        }
        this.updateBugListOpt(buglistopt)
        nextPage('/home/collectInfo')
      },
      // 改变当前页时触发
      handleCurrentChange (val) {
        this.pageNo = val
        this.queryAllBugList()
      },
      // 用户点击上一页按钮改变当前页后触发
      prevClick (val) {
        // this.pageNo = val
      },
      // 用户点击下一页按钮改变当前页后触发
      nextClick (val) {
        // this.pageNo = val
      },
      // 处理类型文字显示
      handleTypeText (val) {
        switch (val) {
          case '0': {
            return '异常'
          }
          case '1': {
            return '崩溃'
          }
          case '2': {
            return '卡顿'
          }
          default: {
            return ''
          }
        }
      },
      // 处理状态文字显示
      handleStatusText (val) {
        switch (val) {
          case '0': {
            return '未解决'
          }
          case '1': {
            return '已解决'
          }
          default: {
            return ''
          }
        }
      },
      // 处理等级文字显示
      handleClassText (val) {
        switch (val) {
          case '0': {
            return '未分级'
          }
          case '1': {
            return '紧急'
          }
          case '2': {
            return '高'
          }
          case '3': {
            return '普通'
          }
          case '4': {
            return '低'
          }
          default: {
            return ''
          }
        }
      }
    },
    mounted () {
      this.queryAllBugList()
      this.queryVersionList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #collect_query
    height 100%
    .collectCon
      height calc(100% - 56px)
      overflow auto
      margin 10px 0 0 10px
      padding-right 10px
      .collect_main
        text-align left
        background-color #fff
        width 100%
        .collect_header
          border-bottom 1px solid rgb(240, 240, 240)
          padding-bottom 20px
          .condition
            padding 10px 25px
          .input-box .el-col-1
            padding-top 5px
        .collect_pages
          .el-pagination
            padding 10px 15px 10px 0
            line-height 30px
            text-align right
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color: #c0c4cc;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #c0c4cc;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #c0c4cc;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #c0c4cc;
    }
</style>
